import * as React from "react"

import { View, Text, Image, FlexStyle, TextStyle } from "react-native"
import { px2dp } from "../../utils"
import { color } from "../../theme/base/color"
import { images } from "../../assets"

const noneDataStyle: FlexStyle = {
  width: "100%",
  flex: 1,
  flexDirection: "column",
  justifyContent: "center"
}

const noneDataIconStyle: FlexStyle = {
  width: px2dp(150),
  height: px2dp(200),
  alignSelf: "center",
  alignItems: "center"
}

const noneDataTextStyle: TextStyle = {
  color: color.info,
  paddingTop: px2dp(5)
}

export interface NoneDataIconProps {
  listData: any
  title: string
  subTitle: string
}

class NoneDataIcon extends React.Component<NoneDataIconProps, {}> {
  render() {
    return this.props.listData.length === 0 ? (
      <View style={noneDataStyle}>
        <View style={noneDataIconStyle}>
          <View>
            <Image source={images.noneData.pageNoData}></Image>
          </View>
          <Text
            style={{
              color: color.info,
              paddingBottom: px2dp(5),
              paddingTop: px2dp(10),
              fontSize: px2dp(18)
            }}
          >
            {this.props.title}
          </Text>
          <Text style={noneDataTextStyle}>{this.props.subTitle}</Text>
        </View>
      </View>
    ) : null
  }
}

export default NoneDataIcon
